<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.box{
				width:326px ;
				margin: 100px auto;
				border: 1px solid black;
				text-align: center;
				position: relative;
				overflow: hidden;
			}
			.modal{
				width: 326px;
				height: 298px;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0,0,0,0.5);
				opacity: 0;
				transition: 1s;
				
			}
			
			p{
				transition: 1s;
			}
			
			h2{
				transition: 1s;
			}
			
			img{
				transition: 1s;
			}
			
			
			
			.box:hover{
				cursor: pointer;
			}
			
			.box:hover .modal{
				opacity: 1;
			}
			
			.box:hover img{
				transform: scale(1.5);
			}
			
			.box:hover h2{
				transform: scale(1.5);
			}
			
			.box:hover p{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../images/咖啡1.png"/>
			<h2>摩卡咖啡</h2>
			<p>摩卡咖啡真的超级好喝哦！</p>
			<div class="modal"></div>
		</div>
	</body>
</html>
